<template>
  <div>
    <el-form ref="ruleForm" :model="ruleForm" label-position="left" label-suffix=":" :rules="rules" label-width="90px">
      <el-row :gutter="20">
        <el-col v-for="(item, index) in columns" :key="index" :xs="24" :sm="item.col" :md="item.col" :lg="item.col"
          :xl="item.col">
          <FormComponents :item-obj="item" :form="ruleForm" :isedit="isEdit" @remoteSelectChange="remoteSelectChange">
            <!-- <template slot="payer">
              <WmsCustomerSelect v-model="ruleForm.payer" size="small" :disabled="true" @getName="getName"></WmsCustomerSelect>
            </template>
            <template slot="payee">
              <WmsCustomerSelect v-model="ruleForm.payee" size="small" @getName="getName"></WmsCustomerSelect>
            </template> -->

            <template slot="newpayer">
              <WmsCustomerSelect v-model="ruleForm.payer" size="small" @getName="getpayerName"></WmsCustomerSelect>
            </template>
            <template slot="newpayee">
              <WmsCustomerSelect v-model="ruleForm.payee" size="small" @getName="getpayeeName"></WmsCustomerSelect>
            </template>
          </FormComponents>
        </el-col>
      </el-row>
    </el-form>
    <div class="foot-fixed-total" style="margin: 12px">
      <el-button @click="$emit('cancel')">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" @click="submit('ruleForm')">{{
        $t("common.confirm")
      }}</el-button>
    </div>
  </div>
</template>

<script>
import {
  FreightForwarderPayable,
  CustomerAccountsReceivable,
} from "@/views/financial/const/index.js";
import { getYT, addPayInfo, addReceivaInfo, bmsBaseFeeItemList } from "@/api/money";
import FormComponents from "@/components/FormComponents/index.vue";
export default {
  components: { FormComponents },
  props: ["orderId", "type", "isEdit", 'customerId'],
  data() {
    return {
      ruleForm: {
        serviceType: "ORDER"
      },
      rules: {
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        payee: [{ required: true, message: "请选择收款人", trigger: "change" }],
        payer: [{ required: true, message: "请选择付款人", trigger: "change" }],
        serviceFeeCode: [{ required: true, message: "请选择费用类型", trigger: "change" }],
      },
      FreightForwarderPayable,
      CustomerAccountsReceivable,
      YTId: '',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerId: null,
      },
      // 收款列表
      payList: [],
      // 付款列表
      paymentList: []
    };
  },
  watch: {
    customerId: {
      handler(v) {
        if(v) {
          this.ruleForm.payer = v
        }
      },
      immediate: true
    }
  },
  computed: {
    columns() {
      const base = [
        {
          prop: "serviceFeeCode",
          label: this.$t('fiance.serviceFeeCode'),
          type: "select",
          col: 24,
          selectOptions: this.type === "PAY" ? this.paymentList : this.payList,
        },
        {
          prop: "amount",
          label: this.$t('fiance.amount'),
          type: "input",
          col: 24,
          inputType: "number",
        }
      ];
      // 付款
      const payInfo = [
        { prop: 'payerName', label: this.$t('fiance.drawee'), type: 'text', col: 12 },
        { prop: 'payee', slot: 'newpayee', label: this.$t('fiance.payee'), type: 'select', col: 24 },
        // { prop: 'payeeName', label: this.$t('fiance.payee'), type: 'text', col: 12 },
        // { prop: 'payer', slot: 'payer', label: this.$t('fiance.drawee'), type: 'select', col: 24 },
      ];
      // 收款
      const receiveInfo = [
        { prop: 'payeeName', label: this.$t('fiance.payee'), type: 'text', col: 12 },
        { prop: 'payer', slot: 'newpayer', label: this.$t('fiance.drawee'), type: 'select', col: 24 },
        // { prop: "payerName", label: this.$t('fiance.drawee'), type: "text", col: 24 },
        // { prop: 'payee', slot: 'payee', label: this.$t('fiance.payee'), type: 'select', col: 24 },
      ];
      if (this.type === "PAY") {
        return [...payInfo, ...base];
      } else if (this.type === "RECEIVE") {
        return [...receiveInfo, ...base];
      }
    },
  },
  mounted() {
    this.getYTId()
    this.getBmsBaseFeeItemList()
  },
  methods: {
    getpayeeName(data) {
      this.ruleForm.payeeName = data
    },
    getpayerName(data) {
      this.ruleForm.payerName = data
    },
    getYTId() {
      getYT({}).then((res) => {
        this.YTId = res;
        if (this.type === "PAY") {
          this.ruleForm.payer = res
          this.ruleForm.payerName = "YT"
        } else {
          this.ruleForm.payee = res
          this.ruleForm.payeeName = "YT"
        }
      });
    },
    getBmsBaseFeeItemList() {
      this.loading = true;
      const { pageNum, pageSize } = this.queryParams;
      const query = {
        ...this.queryParams,
        pageNum: undefined,
        pageSize: undefined,
      };
      const pageReq = { page: pageNum - 1, size: pageSize };
      bmsBaseFeeItemList(query, pageReq).then((response) => {
        const { content, totalElements } = response;
        // 收款列表
        const array1 = content.filter(v=>{
          return v.feeType === '收款'
        })
        this.payList = array1.map(r=>{
          return {
            value: r.feeCode,
            label: r.feeName
          }
        })
        // 付款列表
        const array2 = content.filter(v=>{
          return v.feeType === '付款'
        })
        this.paymentList = array2.map(r=>{
          return {
            value: r.feeCode,
            label: r.feeName
          }
        })
      });
    },
    resetForm() {
      this.$refs['ruleForm'].resetFields();
    },
    remoteSelectChange(v) {
      if (v.prop === "serviceFeeCode") {
        this.ruleForm.feeName = v.selectOptions.find(
          (r) => r.value === v.value
        ).label;
      }
      // if (v.prop === 'payer') {
      //   this.ruleForm.payerName = v.value[0].customerName || v.value[1].customerName;
      // }
      if (v.prop === 'payee') {
        this.ruleForm.payeeName = v.value[0].customerName || v.value[1].customerName;
      }
    },
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          // 当新增付款或收款时，付款人或者收款人为义特，则要传入这个获取的id
          if (this.ruleForm.payerName === 'YT' || this.ruleForm.payeeName === 'YT') {
            this.ruleForm.id = this.YTId
          }
          const _ruleForm = {
            ...this.ruleForm,
            orderId: this.orderId
          }
          // console.log('_ruleForm', _ruleForm)
          // return
          const api = this.type === "PAY" ? addPayInfo : addReceivaInfo;
          api({ ..._ruleForm }).then((res) => {
            if (res) {
              this.$message.success(this.$t('common.succcessInfo'));
              this.$emit('cancel')
              this.resetForm()
              this.getYTId()
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style></style>
